/**
 *  rcc类组件生命周期
 *  rfc函数组件默认没有组件生命周期   可以通过hook模拟
 *
 */
import React, { Component } from 'react'

export default class App extends Component {
  state = {
    num: 100,
    isShow: false
  }
  // 1、constructor
  constructor() {
    // 适合做一些初始化操作
    super()
    console.log('1、constructor构造函数执行了')
  }
  render() {
    // 渲染函数
    // 会执行多次  更新也需要渲染
    console.log('2、render渲染函数执行了')
    return (
      <div>
        App
        <button onClick={() => this.setState({ num: this.state.num + 1 })}>
          {this.state.num}
        </button>
        {this.state.isShow ? <Child></Child> : null}
        <div>
          <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
            显示|隐藏
          </button>
        </div>
      </div>
    )
  }
  componentDidMount() {
    // 获取DOM对象  发送请求
    console.log('3、componentDidMount执行了')
  }
  componentDidUpdate() {
    console.log('4、componentDidUpdate执行了')
  }
  componentWillUnmount() {
    console.log('5、componentWillUnmount执行了')
  }
}
class Child extends Component {
  // 1、constructor
  constructor() {
    super()
    console.log('1、子组件constructor构造函数执行了')
  }
  render() {
    // 会执行多次  更新也需要渲染
    console.log('2、子组件render渲染函数执行了')
    return <div>Child</div>
  }
  componentDidMount() {
    // 获取DOM对象
    console.log('3、子组件componentDidMount执行了')
  }
  componentDidUpdate() {
    console.log('4、子组件componentDidUpdate执行了')
  }
  componentWillUnmount() {
    console.log('5、子组件componentWillUnmount执行了')
  }
}
